<template>
    <el-dialog
        :title="title === 'add' ? '新增展馆' : '编辑展馆'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="30%"
        :info="info"
        @close="closeDialog"
    >
    <el-form :model="form" ref="form" :rules="rules" label-width="180px" :inline="false" size="normal">
        <el-form-item label="礼物展馆名称" prop="title">
            <el-input type=text v-model="form.title" maxlength="6" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="初级展馆图片" prop="lower_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove1"
                :on-success="handlePictureSuccess1"
                action=""
                class="upload-demo"
                list-type="picture"
                :limit="1"
                :file-list="fileList1"
            >
                <el-button v-if="!form.lower_picture" slot="trigger" size="small" type="primary">上传初级展馆图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="高级展馆图片">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove2"
                :on-success="handlePictureSuccess2"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList2"
            >
                <el-button v-if="!form.high_picture" slot="trigger" size="small" type="primary">上传高级展馆图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="初级展馆外框" prop="lower_frame">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove3"
                :on-success="handlePictureSuccess3"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList3"
            >
                <el-button v-if="!form.lower_frame" slot="trigger" size="small" type="primary">上传初级展馆外框</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="高级展馆外框">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove4"
                :on-success="handlePictureSuccess4"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList4"
            >
                <el-button v-if="!form.high_frame" slot="trigger" size="small" type="primary">上传高级展馆外框</el-button>
            </el-upload>
        </el-form-item>

        <!-- <el-form-item label="默认展馆名称">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove5"
                :on-success="handlePictureSuccess5"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList5"
            >
                <el-button v-if="!form.default_title" slot="trigger" size="small" type="primary">上传默认展馆名称</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="初级展馆名称">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove6"
                :on-success="handlePictureSuccess6"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList6"
            >
                <el-button v-if="!form.lower_title" slot="trigger" size="small" type="primary">上传初级展馆名称</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="高级展馆名称">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove7"
                :on-success="handlePictureSuccess7"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList7"
            >
                <el-button v-if="!form.high_title" slot="trigger" size="small" type="primary">上传高级展馆名称</el-button>
            </el-upload>
        </el-form-item> -->
        <el-form-item label="初级展馆背景" prop="lower_bg">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove8"
                :on-success="handlePictureSuccess8"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList8"
            >
                <el-button v-if="!form.lower_bg" slot="trigger" size="small" type="primary">上传初级展馆背景</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="高级展馆背景">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove9"
                :on-success="handlePictureSuccess9"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList9"
            >
                <el-button v-if="!form.high_bg" slot="trigger" size="small" type="primary">上传高级展馆背景</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="默认展馆图片" prop="default_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove10"
                :on-success="handlePictureSuccess10"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList10"
            >
                <el-button v-if="!form.default_picture" slot="trigger" size="small" type="primary">上传默认展馆图片</el-button>
            </el-upload>
        </el-form-item>

        <el-form-item label="排序">
            <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input type="textarea" v-model="form.note" rows="5" maxlength="20" show-word-limit resize="none"></el-input>
        </el-form-item>

        <el-form-item label="普通集齐横幅id" prop="lower_collect_banner_id">
            <el-input v-model="form.lower_collect_banner_id"></el-input>
        </el-form-item>
        <el-form-item label="高级集齐横幅id">
            <el-input v-model="form.high_collect_banner_id"></el-input>
        </el-form-item>
        <el-form-item label="集齐特效">
            <el-upload
                v-if="!form.collect_special.includes('.mp4')"
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove7"
                :on-success="handlePictureSuccess7"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList7"
            >
                <el-button v-if="!form.collect_special" slot="trigger" size="small" type="primary">上传集齐特效</el-button>
            </el-upload>
            <div v-else class="flex">
                <video :src="form.collect_special" class="video" autoplay muted controls></video>
                <span @click="handlePictureRemove7" class="ml-4">删除</span>
            </div>
        </el-form-item>
        <el-form-item label="集齐普通横幅字体颜色">
            <div class="flex mb-4">
                <span class="fontColor">默认字体颜色：</span>
                <el-input v-model="form.lower_collect_banner_color.default" placeholder="请输入默认字体颜色"></el-input>
            </div>
            <div class="flex mb-4">
                <span class="fontColor">用户字体颜色：</span>
                <el-input v-model="form.lower_collect_banner_color.user" placeholder="请输入用户字体颜色"></el-input>
            </div>
            <div class="flex mb-4">
                <span class="fontColor">套装名称字体颜色：</span>
                <el-input v-model="form.lower_collect_banner_color.name" placeholder="请输入套装名称字体颜色"></el-input>
            </div>
            <div class="flex">
                <span class="fontColor">完成任务提示颜色：</span>
                <el-input v-model="form.lower_collect_banner_color.task" placeholder="请输入完成任务提示颜色"></el-input>
            </div>
        </el-form-item>
        <el-form-item label="集齐高级横幅字体颜色">
            <div class="flex mb-4">
                <span class="fontColor">默认字体颜色：</span>
                <el-input v-model="form.high_collect_banner_color.default" placeholder="请输入默认字体颜色"></el-input>
            </div>
            <div class="flex mb-4">
                <span class="fontColor">用户字体颜色：</span>
                <el-input v-model="form.high_collect_banner_color.user" placeholder="请输入用户字体颜色"></el-input>
            </div>
            <div class="flex mb-4">
                <span class="fontColor">套装名称字体颜色：</span>
                <el-input v-model="form.high_collect_banner_color.name" placeholder="请输入套装名称字体颜色"></el-input>
            </div>
            <div class="flex">
                <span class="fontColor">完成任务提示颜色：</span>
                <el-input v-model="form.high_collect_banner_color.task" placeholder="请输入完成任务提示颜色"></el-input>
            </div>
        </el-form-item>

        <el-form-item label="默认展馆详情图片" prop="default_large_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove11"
                :on-success="handlePictureSuccess11"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList11"
            >
                <el-button v-if="!form.default_large_picture" slot="trigger" size="small" type="primary">上传默认展馆图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="普通展馆详情图片" prop="lower_large_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove12"
                :on-success="handlePictureSuccess12"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList12"
            >
                <el-button v-if="!form.lower_large_picture" slot="trigger" size="small" type="primary">上传默认展馆图片</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="高级展馆详情图片" prop="high_large_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove13"
                :on-success="handlePictureSuccess13"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList13"
            >
                <el-button v-if="!form.high_large_picture" slot="trigger" size="small" type="primary">上传默认展馆图片</el-button>
            </el-upload>
        </el-form-item>

        <el-form-item label="未点亮默认图" prop="default_bg_picture">
            <el-upload
                ref="upload"
                :auto-upload="true"
                :before-upload="beforeAvatarUpload"
                :http-request="customizeUpload"
                :on-remove="handlePictureRemove14"
                :on-success="handlePictureSuccess14"
                action=""
                class="upload-demo"
                list-type="picture"
                :file-list="fileList14"
            >
                <el-button v-if="!form.default_bg_picture" slot="trigger" size="small" type="primary">上传未点亮默认图</el-button>
            </el-upload>
        </el-form-item>

        <el-form-item label="是否推送">
            <el-radio-group v-model="form.is_push">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>

    <section slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
    </section>
    </el-dialog>
</template>
  
<script>
  import { hallSave } from '@/api/giftPavilion'
  export default {
    name: '',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'add'
        },
        info: {
            type: Object,
            default: () => {
                return {
                    title: undefined,
                    id: undefined,
                    sort: undefined,
                    lower_picture: undefined,
                    lower_frame: undefined,
                    high_picture: undefined,
                    high_frame: undefined,
                    note: undefined,
                    default_title: undefined,
                    lower_title: undefined,
                    high_title: undefined,
                    lower_bg: undefined,
                    high_bg: undefined,
                    default_picture: undefined,
                    lower_collect_banner_id: undefined,
                    high_collect_banner_id: undefined,
                    collect_special: '',
                    lower_collect_banner_color: {
                        default: undefined,
                        user: undefined,
                        name: undefined,
                        task: undefined,
                    },
                    high_collect_banner_color:  {
                        default: undefined,
                        user: undefined,
                        name: undefined,
                        task: undefined,
                    },
                    is_push: undefined,
                    default_large_picture: undefined,
                    lower_large_picture: undefined,
                    high_large_picture: undefined,
                    default_bg_picture: undefined
                }
            }
        },
        
    },
    data() {
      return {
        fileList1: [],
        fileList2: [],
        fileList3: [],
        fileList4: [],
        fileList5: [],
        fileList6: [],
        fileList7: [],
        fileList8: [],
        fileList9: [],
        fileList10: [],
        fileList11: [],
        fileList12: [],
        fileList13: [],
        fileList14: [],
        form: {
            title: undefined,
            id: undefined,
            sort: undefined,
            lower_picture: undefined,
            lower_frame: undefined,
            high_picture: undefined,
            high_frame: undefined,
            note: undefined,
            default_title: undefined,
            lower_title: undefined,
            high_title: undefined,
            lower_bg: undefined,
            high_bg: undefined,
            default_picture: undefined,
            lower_collect_banner_id: undefined,
            high_collect_banner_id: undefined,
            collect_special: '',
            lower_collect_banner_color: {
                default: undefined,
                user: undefined,
                name: undefined,
                task: undefined,
            },
            high_collect_banner_color:  {
                default: undefined,
                user: undefined,
                name: undefined,
                task: undefined,
            },
            is_push: undefined,
            default_large_picture: undefined,
            lower_large_picture: undefined,
            high_large_picture: undefined,
            default_bg_picture: undefined,
        },
        rules: {
            lower_picture: [{ required: true, message: '请上传初级展馆图片', trigger: 'blur' }],
            lower_frame: [{ required: true, message: '请上传初级展馆外框', trigger: 'blur' }],
            title: [{ required: true, message: '请输入展馆名称', trigger: 'blur' }],
            default_title: [{ required: true, message: '请上传默认展馆名称', trigger: 'blur' }],
            lower_title: [{ required: true, message: '请上传初级展馆名称', trigger: 'blur' }],
            lower_bg: [{ required: true, message: '请上传初级展馆背景', trigger: 'blur' }],
            default_picture: [{ required: true, message: '请上传默认展馆图片', trigger: 'blur' }],
            lower_collect_banner_id: [{ required: true, message: '请输入普通集齐横幅id', trigger: 'blur' }],
            lower_collect_banner_color: [{ required: true, message: '请输入集齐普通横幅字体颜色', trigger: 'blur' }],
        },
      }
    },
    watch: {
        title: async function(newValue, oldValue) {
            // console.log(newValue,'title',this.info)
            if (newValue === 'edit') {
                console.log(this.info)
                const lower_collect_banner_color = this.info.lower_collect_banner_color ? JSON.parse(this.info.lower_collect_banner_color) : {
                    default: undefined,
                    user: undefined,
                    name: undefined,
                    task: undefined,
                }
                const high_collect_banner_color = this.info.high_collect_banner_color ? this.info.high_collect_banner_color : {
                    default: undefined,
                    user: undefined,
                    name: undefined,
                    task: undefined,
                }
                
                this.form = {
                    title: this.info.title,
                    id: this.info.id,
                    sort: this.info.sort,
                    lower_picture: this.info.lower_picture,
                    lower_frame: this.info.lower_frame,
                    high_picture: this.info.high_picture,
                    high_frame: this.info.high_frame,
                    note: this.info.note,
                    default_title: this.info.default_title,
                    lower_title: this.info.lower_title,
                    high_title: this.info.high_title,
                    lower_bg: this.info.lower_bg,
                    high_bg: this.info.high_bg,
                    default_picture: this.info.default_picture,
                    lower_collect_banner_id: this.info.lower_collect_banner_id,
                    high_collect_banner_id: this.info.high_collect_banner_id,
                    collect_special: this.info.collect_special,
                    lower_collect_banner_color: {
                        default: lower_collect_banner_color.default,
                        user: lower_collect_banner_color.user,
                        name: lower_collect_banner_color.name,
                        task: lower_collect_banner_color.task,
                    },
                    high_collect_banner_color:  {
                        default: high_collect_banner_color.default,
                        user: high_collect_banner_color.user,
                        name: high_collect_banner_color.name,
                        task: high_collect_banner_color.task,
                    },
                    is_push: this.info.is_push,
                    default_large_picture: this.info.default_large_picture,
                    lower_large_picture: this.info.lower_large_picture,
                    high_large_picture: this.info.high_large_picture,
                    default_bg_picture: this.info.default_bg_picture,
                }
                
                this.fileList1 = this.info.lower_picture ? [{url: this.info.lower_picture}] : []
                this.fileList2 = this.info.high_picture ? [{url: this.info.high_picture}] : []
                this.fileList3 = this.info.lower_frame ? [{url: this.info.lower_frame}] : []
                this.fileList4 = this.info.high_frame ? [{url: this.info.high_frame}] : []
                this.fileList5 = this.info.default_title ? [{url: this.info.default_title}] : []
                this.fileList6 = this.info.lower_title ? [{url: this.info.lower_title}] : []
                this.fileList7 = this.info.collect_special ? [{url: this.info.collect_special}] : []
                this.fileList8 = this.info.lower_bg ? [{url: this.info.lower_bg}] : []
                this.fileList9 = this.info.high_bg ? [{url: this.info.high_bg}] : []
                this.fileList10 = this.info.default_picture ? [{url: this.info.default_picture}] : []
                this.fileList11 = this.info.default_large_picture ? [{url: this.info.default_large_picture}] : []
                this.fileList12 = this.info.lower_large_picture ? [{url: this.info.lower_large_picture}] : []
                this.fileList13 = this.info.high_large_picture ? [{url: this.info.high_large_picture}] : []
                this.fileList14 = this.info.default_bg_picture ? [{url: this.info.default_bg_picture}] : []
            }
        }
    },
    created() {
      
    },
  
    methods: {
        closeDialog() {
            if (this.$refs['form']) {
                this.$refs['form'].clearValidate(); // 清除整个表单的校验
                this.$refs['form'].resetFields() // 清除整个表单的校验
            }
            this.fileList1 = []
            this.fileList2 = []
            this.fileList3 = []
            this.fileList4 = []
            this.fileList5 = []
            this.fileList6 = []
            this.fileList7 = []
            this.fileList8 = []
            this.fileList9 = []
            this.fileList10 = []
            this.fileList11 = []
            this.fileList12 = []
            this.fileList13 = []
            this.fileList14 = []
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
        },
        onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    
                    if(this.title === 'add') {
                        this.form.lower_collect_banner_color = JSON.stringify(this.form.lower_collect_banner_color)
                        this.form.high_collect_banner_color = JSON.stringify(this.form.high_collect_banner_color)
                        hallSave(this.form).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                                this.$emit('update:title', 'add')
                                this.$emit('update:dialogVisible', false)
                                this.$emit('updateTable')
                            }
                        })
                    }else {
                        this.$emit('updateTable', this.form)
                        this.$emit('update:title', 'add')
                        this.$emit('update:dialogVisible', false)
                    }
                }
            })
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/gif'
            // const isLt2M = file.size / 1024 / 1024 < 2

            // if (!isJPG) {
            //     this.$message.error('请上传JPG/PNG格式的图片!')
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传图片大小不能超过 2MB!')
            // }
            // return isJPG && isLt2M
        },
        handlePictureSuccess1() {
            this.form.lower_picture = this.ossLastImgUrl
        },
        handlePictureRemove1() {
            this.fileList1 = []
            this.form.lower_picture = undefined
        },
        handlePictureSuccess2() {
            this.form.high_picture = this.ossLastImgUrl
        },
        handlePictureRemove2() {
            this.fileList2 = []
            this.form.high_picture = undefined
        },
        handlePictureSuccess3() {
            this.form.lower_frame = this.ossLastImgUrl
        },
        handlePictureRemove3() {
            this.fileList3 = []
            this.form.lower_frame = undefined
        },
        handlePictureSuccess4() {
            this.form.high_frame = this.ossLastImgUrl
        },
        handlePictureRemove4() {
            this.fileList4 = []
            this.form.high_frame = undefined
        },
        handlePictureSuccess5() {
            this.form.default_title = this.ossLastImgUrl
        },
        handlePictureRemove5() {
            this.fileList5 = []
            this.form.default_title = undefined
        },
        handlePictureSuccess6() {
            this.form.lower_title = this.ossLastImgUrl
        },
        handlePictureRemove6() {
            this.fileList6 = []
            this.form.lower_title = undefined
        },
        handlePictureSuccess7() {
            this.form.collect_special = this.ossLastImgUrl
        },
        handlePictureRemove7() {
            this.fileList7 = []
            this.form.collect_special = ''
        },
        handlePictureSuccess8() {
            this.form.lower_bg = this.ossLastImgUrl
        },
        handlePictureRemove8() {
            this.fileList8 = []
            this.form.lower_bg = undefined
        },
        handlePictureSuccess9() {
            this.form.high_bg = this.ossLastImgUrl
        },
        handlePictureRemove9() {
            this.fileList9 = []
            this.form.high_bg = undefined
        },
        handlePictureSuccess10() {
            this.form.default_picture = this.ossLastImgUrl
        },
        handlePictureRemove10() {
            this.fileList10 = []
            this.form.default_picture = undefined
        },
        handlePictureSuccess11() {
            this.form.default_large_picture = this.ossLastImgUrl
        },
        handlePictureRemove11() {
            this.fileList11 = []
            this.form.default_large_picture = undefined
        },
        handlePictureSuccess12() {
            this.form.lower_large_picture = this.ossLastImgUrl
        },
        handlePictureRemove12() {
            this.fileList12 = []
            this.form.lower_large_picture = undefined
        },
        handlePictureSuccess13() {
            this.form.high_large_picture = this.ossLastImgUrl
        },
        handlePictureRemove13() {
            this.fileList13 = []
            this.form.high_large_picture = undefined
        },
        handlePictureSuccess14() {
            this.form.default_bg_picture = this.ossLastImgUrl
        },
        handlePictureRemove14() {
            this.fileList14 = []
            this.form.default_bg_picture = undefined
        },
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color : #409eff;
  }
  
  .avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
  }
  
  .avatar {
    width   : 100px;
    height  : 100px;
    display : block;
  }
  
  ::v-deep .lu-input {
    width : 300px !important;
  }
  .fontColor{
    display: inline-block;
    width: 180px;
    text-align: right;
  }
  .video{
    width: 200px;
  }
  .delVideo {
    // margin-left: ;
  }
  </style>
  